<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时视频分析</title>
    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/styles.css">
</head>
<body>
    <div class="app-container">
        <div class="app-header">
            <h1>实时视频分析</h1>
            <p>使用摄像头捕捉视频并获取AI实时分析</p>
        </div>
        
        <div class="app-content">
            <div class="section">
                <div class="section-title">
                    <img src="/static/icons/video.svg" alt="视频图标" class="icon">
                    视频捕捉
                </div>
                
                <div class="video-container">
                    <video id="videoElement" autoplay playsinline></video>
                    <div class="video-controls">
                        <select id="cameraSelect" class="form-control">
                            <option value="">选择摄像头...</option>
                        </select>
                        <button id="startBtn" class="btn btn-primary">
                            <img src="/static/icons/process.svg" alt="开始" class="icon">
                            开始捕捉
                        </button>
                        <button id="stopBtn" class="btn btn-danger" disabled>
                            <img src="/static/icons/clear.svg" alt="停止" class="icon">
                            停止捕捉
                        </button>
                    </div>
                    <div class="timer">剩余时间: <span id="timer">20</span>秒</div>
                </div>

                <div class="form-group">
                    <label class="form-label">提示词（可选）</label>
                    <input type="text" id="textPrompt" class="form-control" placeholder="描述这个视频的具体过程">
                </div>
            </div>

            <div class="section">
                <div class="section-title">
                    <img src="/static/icons/result.svg" alt="结果" class="icon">
                    AI分析结果
                </div>
                <div class="result-container">
                    <div id="resultList" class="result-list"></div>
                </div>
            </div>

            <div class="notice">
                <h4 class="notice-title">使用说明</h4>
                <ul class="notice-list">
                    <li>点击"开始捕捉"按钮启动摄像头</li>
                    <li>系统会自动捕捉20秒视频片段进行分析</li>
                    <li>AI分析结果会以弹幕形式实时显示</li>
                    <li>可以随时停止捕捉</li>
                </ul>
            </div>
        </div>
    </div>

    <script src="/static/js/video-client.js"></script>
</body>
</html>